<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Redirect to the login page if there is no session created -->
<%
if (session.getAttribute("username") != null) {
	response.sendRedirect("/home.jsp");
}
%>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Login | Media Vault</title>
	
		<!--icon-->
		<link rel="icon" href="images/mv.ico" type="">
		<!--CSS-->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <link rel="stylesheet" href="css/login.css" type="text/css" media="screen"/>
		<style>
		*{
		    margin:0px;
		    padding:0px;
		}
		</style>
		<!--Ajax Scripts-->
		<script type="text/javascript" src="js/AjaxLogin.js"></script>
		<script type="text/javascript" src="js/AjaxCreateNewAccount.js"></script>
		<!--Java Scripts-->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/sliding.form.js"></script>
    </head>

    <body>
        <div id="content">
            <h1>Media Vault</h1>
            <div id="wrapper">
                <div id="steps">
                    <form id="formlogin" name="formlogin" action="" method="post">
                        <fieldset class="step">
							<legend>Welcome to Your Media Vault Login!!!</legend>
							<div id="loginPanel">
								<div id="LeftSide">
									<div><img src="images/media_vault.jpg" width="250" height="250" id="right_image"/></div>
								</div>
								<div id="RightSide">
									<p style="text-align:left;">Please enter your login details....</p>
									<p>
										<label for="username">User name</label>
										<input id="username" name="username" />
									</p>
									<p>
										<label for="password">Password</label>
										<input id="password" name="password" type="password" AUTOCOMPLETE=OFF />
									</p>
									<p class="submit">
										<button id="login" type="button" onClick="ajaxLogin()">Login</button>
									</p>								
								</div>
							</div>
                        </fieldset>
					</form>
					<form id="formforgotpass" name="formforgotpass" action="/retrievepassword" method="post">
                        <fieldset class="step">
                            <legend>Forgot Password</legend>
							<div id="LeftSide">
								<div><img src="images/forgot.jpg" width="250" height="250" id="right_image"/></div>
							</div>
							<div id="RightSide">
								<p style="text-align:left;">Please enter your email address to retrive login information</p>
								<p>
									<label for="email">Email</label>
									<input id="email" name="email" placeholder="info@mediavault.com" type="email" AUTOCOMPLETE=OFF />
								</p>
								<div id="ajaxRespond_forgotpass"></div>
								<p class="submit">
									<button id="forgot_password" type="button" onclick="ajaxRetrivePassword()">Send</button>
								</p>
							</div>
                        </fieldset>
					<form>
					<form id="formcreate" name="formcreate" method="post">
                        <fieldset class="step">
                            <legend>Create New Account</legend>
                            <div id="createaccountresponse">
							<div id="LeftSide">
								<div><img src="images/new_user.png" width="250" height="250" id="right_image"/></div>
							</div>
							<div id="RightSide">
								<p>
									<label for="email">Email / Username</label>
									<input id="CreateUsername" name="username" placeholder="info@mediavault.com" type="email" AUTOCOMPLETE=OFF />
								</p>
								<p>
									<label for="password">Password</label>
									<input id="CreatePassword" name="password" type="password" AUTOCOMPLETE=OFF />
								</p>
								<p>
									<label for="name">First Name</label>
									<input id="firstName" name="firstName" type="text" AUTOCOMPLETE=OFF />
								</p>
								<p>
									<label for="name">Last Name</label>
									<input id="lastName" name="lastName" type="text" AUTOCOMPLETE=OFF />
								</p> 
								<input type="hidden" value="user" id="user_role" name="user_role"/>
								<p class="submit">
									<button id="Create" type="button" onClick="ajaxCreateNewAccount()">Create</button>
								</p>
							</div>
							</div>
                        </fieldset>
					</form>
                </div>
                <div id="navigation" style="display:none;">
                    <ul>
                        <li class="selected">
                            <a href="#">Login</a>
                        </li>
                        <li>
                            <a href="#">Forgot Password</a>
                        </li>
                        <li>
                            <a href="#">Create New Account</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>